<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import {
    Scissor,
    FolderOpened,
    ChatDotRound,
    Microphone,
    VideoCamera,
    MuteNotification,
    Comment,
    Switch,
    Link
} from '@element-plus/icons-vue'

const props = defineProps({
    active: {
        type: Object,
        default: () => ({} as ChatMenu)
    },
    collections: {
        type: Array<Collection>,
        default: () => []
    }
})

const emit = defineEmits(['send', 'clear'])

const speaker = ref('')
const textarea = ref('')

watch(() => props.active, () => {
    speaker.value = ''
})

const handleOpen = async () => {
    const file = await window.ipcRenderer.invoke('select-local-file', {
        properties: ['openFile'],
        filters: [{ name: '图片文件', extensions: ['png', 'jpg', 'jpeg', 'gif'] }]
    }, true)

    emit('send', {
        speaker: speaker.value,
        text: file.path,
        type: 1
    })
}

const website = reactive({
    element: null as HTMLWebViewElement | null,
    effective: false
})

const handleOpenDropdown = () => {
    const webview = document.querySelector('webview') as HTMLWebViewElement
    website.element = webview
    if (webview) {
        website.effective = true
    } else {
        website.effective = false
    }
}

const toggleWidescreen = () => {
    const webview = document.querySelector('webview') as HTMLWebViewElement
    const image = webview.parentNode as HTMLElement, id = image.getAttribute('chat-id')
    document.body.querySelectorAll(`[chat-id="${id}"]`).forEach(el => el.classList.toggle('webscreen'))
}

const clear = () => {
    emit('clear')
}

const send = () => {
    emit('send', {
        speaker: speaker.value,
        text: textarea.value,
        type: 0
    })
    textarea.value = ''
}
</script>
<template>
    <div class="bottom">
        <el-row justify="space-between">
            <div class="icon-group">
                <el-button text>
                    <template #icon>
                        <img style="width: 22px;" src="../../assets/wechat/emoji.svg" alt="emoji">
                    </template>
                </el-button>
                <el-button text title="收藏">
                    <template #icon>
                        <el-dropdown :disabled="props.collections.length === 0" popper-class="wechat-dropdown"
                            trigger="click">
                            <img style="width: 24px; padding-top: 2px;" src="../../assets/wechat/like.svg" alt="like">
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :icon="Link" v-for="collection in props.collections"
                                        :disabled="!website.effective"
                                        @click="website.element?.loadURL(collection.url)">
                                        {{ collection.title }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-button>
                <el-button :icon="FolderOpened" @click="handleOpen" text title="文件" />
                <el-button :icon="Scissor" text />
                <el-button text title="发言人">
                    <template #icon>
                        <el-dropdown popper-class="wechat-dropdown" trigger="click">
                            <el-icon>
                                <ChatDotRound />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :icon="speaker === '' ? Comment : MuteNotification"
                                        @click="speaker = ''">
                                        @ 自己
                                    </el-dropdown-item>
                                    <el-dropdown-item @click="speaker = props.active?.title"
                                        :icon="speaker === props.active?.title ? Comment : MuteNotification">
                                        @ {{ props.active?.title }}
                                    </el-dropdown-item>
                                    <el-dropdown-item divided @click="clear">
                                        <el-text type="danger">清空聊天记录</el-text>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-button>
            </div>
            <div class="icon-group">
                <el-button :icon="Microphone" text />
                <el-button text title="视频">
                    <template #icon>
                        <el-dropdown popper-class="wechat-dropdown" @visible-change="handleOpenDropdown"
                            trigger="click">
                            <el-icon>
                                <VideoCamera />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :icon="Switch" :disabled="!website.effective"
                                        @click="toggleWidescreen">
                                        宽屏显示
                                    </el-dropdown-item>
                                    <el-dropdown-item :icon="Switch" :disabled="!website.effective"
                                        @click="website.element?.executeJavaScript(`setTimeout(topVideo, 0)`, true)">
                                        网页全屏
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-button>
            </div>
        </el-row>
        <el-scrollbar class="chat-input">
            <el-input v-model="textarea" :autosize="{ minRows: 4, maxRows: 10 }" @keyup.enter="send" :spellcheck="false"
                type="textarea" />
        </el-scrollbar>
        <el-row justify="end">
            <el-button :type="textarea ? 'success' : 'info'" :disabled="!textarea"
                @click="send">&emsp;发送(S)&emsp;</el-button>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>
.bottom {
    height: calc(100% - 10px);
    padding: 5px 12px;

    .icon-group {
        .el-button {
            width: 33px;
            height: 33px;

            :deep(.el-icon) {
                font-size: 22px;
            }
        }

        .el-button+.el-button {
            margin-left: 5px;
        }
    }

    .chat-input {
        height: calc(100% - 75px);

        .el-textarea {
            height: 100%;
            caret-color: #07c160;

            :deep(.el-textarea__inner) {
                height: 100%;
                resize: none;
                background-color: transparent;
                box-shadow: none;
                color: #000;

                &:focus {
                    box-shadow: none;
                }
            }
        }
    }
}
</style>